<script setup lang="ts">
import { ref, computed, watch} from 'vue'

// 1. 内部状态
const sth = ref('天元')
const big = ref(false)

watch(big, (newVal, oldVal) => {
  console.log(`[watch]  "${oldVal}" 大小改变ing "${newVal}"`)
})
// 2. 子传父：先声明要 emit 的事件
const emit = defineEmits<{
  'size-change': [isLarge: boolean]   // 泛型元组写法，事件名 + 参数类型
}>()

const props = defineProps<{
  message: string
}>()

// 3. 切换 + 上报
function toggleSize() {
  big.value = !big.value
  emit('size-change', big.value)     // 把最新状态扔给父
}

// 4. 计算属性（仅子自己用，展示用）
const label = computed(() => (big.value ? '大号' : '正常'))
</script>

<template>
  <div class="box" :class="{ large: big }">
    {{ sth }} - {{ label }}
  </div>
  <p>父说：{{ message }}</p>
  <button @click="toggleSize">放大/还原</button>
</template>

<style scoped>
.box {
  font-size: 24px;
  transition: all 0.3s;
}
.large {
  font-size: 48px;
  transform: scale(1.5);
}
</style>